<template>
    <div class="container">
        <div class="title"></div>
        <div class="content">
            <div class="item" v-for='item,index in list' :key='index'>
                <div class="icon"></div>
                <div class="text">{{item.text}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    text: '是国内首个数字化智能安全管理预警平台'
                },
                {
                    text: '系统基于大数据、可视化、物联网、AI算法等先进技术利用网络摄像机24小时监控工作区域,深度分析数据,精准识别违规事项'
                },
                {
                    text: '可通过公众号、现场语音等短信提醒多位一体实时预警'
                },
            ]
        }
    },
    methods: {

    },
}
</script>

<styel lang='scss' scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;


    .title {
        height: 45px;
        width: 90%;
        background: url("../../../../../assets/img/otto/introduction.png") no-repeat 0px 0px;
        background-size: 100% 100%;
    }

    .content {
        flex: 1;
        font-size: 15px;
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        line-height: 24px;
        .item {
            display: flex;
            .icon {
                height: 15px;
                width: 15px;
                background: url("../../../../../assets/img/otto/icon-xin.png") no-repeat 0px 0px;
                background-size: 100% 100%;
            }

            .text {
                flex: 1;
                margin-left: 10px;
            }
        }        

       
    }
}
</styel>